<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>巡查结果录入</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
  <style>
    .full-width-container {
      width: 100vw;
      margin-left: -20px;
      padding: 20px;
      box-sizing: border-box;
    }

    /* 容器基础样式 */
    .dia_y {
      width: 50%;
      margin: 1%;
      height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      /* border: 1px solid #ccc; /* 加上边框更贴近示例 */
      border-radius: 4px;
    }

    .dia_z {
      /* border: 2px solid #ccc; */
      width: 50%;
      margin: 1%;
      height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      /* 为子元素固定定位提供参考 */
    }

    .sticky-input {
      position: sticky;
      top: 0;
      /* 固定在容器顶部 */
      background: #fff;
      /* 背景色与容器一致 */
      z-index: 10;
      /* 确保输入框在树组件上方 */
      padding: 10px 0;
      /* 保持与原布局一致的间距 */
      border-bottom: 1px solid #eee;
      /* 可选：添加分隔线 */
    }

    .scroll-content {
      padding-top: 10px;
      /* 为固定输入框留出空间 */
      height: calc(100% - 50px);
      /* 滚动内容区域高度 */
    }

    /* 顶部统计栏 */
    .xuche {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background-color: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
    }

    /* 多选框列表区域 */
    .checkbox-grid {
      padding: 10px 15px;
    }

    /* 调整多选框样式，让每个选项垂直分布更合理 */
    .el-checkbox {
      display: block;
      margin-bottom: 8px;
    }

    /* 滚动条样式（可选，让滚动条更美观） */
    .dia_y::-webkit-scrollbar {
      width: 6px;
    }

    .dia_y::-webkit-scrollbar-thumb {
      background-color: #c0c4cc;
      border-radius: 3px;
    }

    .dia_y::-webkit-scrollbar-track {
      background-color: #f5f7fa;
    }
  </style>
</head>

<body>
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar" v-cloak>
        <div class="m-title">巡查录入</div>
      </div>
    </header>

    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'patrol_ResultMain', 'form': 'dataForm','primary_key':'ResultMain_SerialNumber' })">

      <el-form :model="dataForm" ref="form" inline-message="true" style="width: 100%">
        <el-descriptions :column="1" size="large" border>



          <el-descriptions-item>
            <template #label>
              <div class="cell-item">上报日期：</div>
            </template>
            <el-form-item prop="BusinessDate" :rules="[{ required: true, message: '请选择日期', trigger: 'blur' }]">

              <el-date-picker v-model="dataForm.BusinessDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                class="borderless-input" type="date" placeholder="请选择日期" size="large" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">计划日期：</div>
            </template>
            <el-form-item prop="PlanDate" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">

              <el-date-picker @change="GettaskPlaninfo" v-model="dataForm.PlanDate" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" class="borderless-input" type="date" placeholder="请选择日期" size="large" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">巡逻任务：</div>
            </template>
            <el-form-item prop="Task_SerialNumber" :rules="[{ required: true, message: '请选择巡逻任务', trigger: 'change' }]">

              <yl-select @change="GettaskPlaninfo" :options="taskinfo"
                :props="{label:'Task_Name',value:'Task_SerialNumber'}" v-model="dataForm.Task_SerialNumber"
                placeholder="请选择巡逻任务">
                <el-table-column prop="Task_SerialNumber" width="180" show-overflow-tooltip
                  label="任务编号"></el-table-column>
                <el-table-column prop="Task_Name" show-overflow-tooltip label="任务名称"></el-table-column>

              </yl-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">巡逻计划：</div>
            </template>
            <el-form-item prop="taskPlan_SerialNumber"
              :rules="[{ required: true, message: '请选择巡逻计划', trigger: 'change' }]">

              <yl-select :options="taskPlaninfo" :props="{label:'taskPlan_SerialNumber',value:'taskPlan_SerialNumber'}"
                clearable v-model="dataForm.taskPlan_SerialNumber" placeholder="请选择巡逻计划">
                <el-table-column prop="taskPlan_SerialNumber" show-overflow-tooltip label="计划编号"></el-table-column>
                <el-table-column prop="PlanDate" show-overflow-tooltip label="计划日期"></el-table-column>
                <el-table-column prop="Membered" show-overflow-tooltip label="执行人"></el-table-column>
                <el-table-column prop="team_name" show-overflow-tooltip label="队伍名称"></el-table-column>
                <el-table-column prop="Contact_Phone" show-overflow-tooltip label="联系电话"></el-table-column>
                <el-table-column prop="Task_Name" show-overflow-tooltip label="任务名称"></el-table-column>
              </yl-select>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">执行方式：</div>
            </template>
            <el-form-item prop="patrolType" :rules="[{ required: true, message: '请选择执行方式', trigger: 'change' }]">
              <el-select v-model.trim="dataForm.patrolType" placeholder="请选择执行方式">
                <el-option v-for="item in patrolTypeinfo" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">备注：</div>
            </template>
            <el-form-item prop="Memo" >
              <el-input v-model="dataForm.Memo" class="borderless-input" placeholder="请输入备注" />
            </el-form-item>
          </el-descriptions-item>


          <!-- <el-descriptions-item>
            <template #label>
              <div class="cell-item">情况上报</div>
            </template>
            <el-form-item :prop="Detailcontent">
              <yl-text-editor v-model="dataForm.Detailcontent" 
                placeholder="请填写情况上报"></yl-text-editor>
            </el-form-item>
          </el-descriptions-item> -->

        </el-descriptions>
      </el-form>


      <div id="ChildTable">


        <div class="m-toolbar" v-cloak>
          <div class="m-title">巡查项目{{childDataForm.filter(item => item.Row_Status != '1').length == 0?'(暂无数据)':''}}
          </div>
        </div>

        <div class="operation" style="float: right;">
          <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
          <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
        </div>

        <el-form :model="{childDataForm}" ref="form1" inline-message="true" style="width: 100%">
          <el-descriptions
            :data-options="JSON.stringify({ 'TableName': 'patrol_ResultDetail', 'form': 'childDataForm', 'ParentTableName': 'patrol_ResultMain'})"
            :column="2" size="large" border v-for="(item,index) in childDataForm.filter(item => item.Row_Status != '1')"
            :key="index">

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">巡查区域：</div>
              </template>
              <el-form-item :prop="'childDataForm.'+index+'.area'"
                :rules="[{ required: true, message: '请输入巡查区域', trigger: 'blur' }]">
                <el-input v-model.trim="item.area" class="borderless-input" placeholder="请输入巡查区域" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">巡检项目：</div>
              </template>
              <el-form-item :prop="'childDataForm.'+index+'.Item'"
                :rules="[{ required: true, message: '请输入巡检项目', trigger: 'blur' }]">
                <el-input v-model.trim="item.Item" class="borderless-input" placeholder="请输入巡检项目" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item :span="2">
              <template #label>
                <div class="cell-item">项目描述：</div>
              </template>
              <el-form-item :prop="'childDataForm.'+index+'.ItemMemo'"
                :rules="[{ required: true, message: '请输入项目描述', trigger: 'blur' }]">
                <!-- <el-input v-model.trim="item.ItemMemo" class="borderless-input" placeholder="请输入项目描述" /> -->

                <yl-text-editor v-model="item.ItemMemo" placeholder="请填写项目描述："></yl-text-editor>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">巡检结果：</div>
              </template>
              <el-form-item :prop="'childDataForm.'+index+'.Result'"
                :rules="[{ required: true, message: '请选择巡检结果', trigger: 'blur' }]">

                <!-- <el-input v-model.trim="item.Result" class="borderless-input" placeholder="请选择巡检结果" /> -->
                <el-select v-model.trim="item.Result" placeholder="请选择巡检结果">
                  <el-option v-for="item in resultinfo" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>

              </el-form-item>
            </el-descriptions-item>

            <!-- <el-descriptions-item>
              <template #label>
                <div class="cell-item">巡检图片附件</div>
              </template>
              <el-form-item :prop="'childDataForm.'+index+'.Files_Image_URL'">


                <yl-upload v-model="item.Files_Image_URL"></yl-upload>

              </el-form-item>
            </el-descriptions-item> -->

          </el-descriptions>
        </el-form>


      </div>

    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" plain @click="handleSubmit1" :loading="loading">提交</el-button>
    </footer>
  </div>
</body>

<script src="../../../utils/utils.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../utils/ID_Validity.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>

<script src="./js/Add.js"></script>

</html>